<template>
    <div class="shopcar-container">
       <div class="goods-list">
           <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img src="https://img.alicdn.com/imgextra/i4/1695308781/TB2dIbeBvuSBuNkHFqDXXXfhVXa_!!1695308781.jpg_430x430q90.jpg">
						<div class="info">
							<h1>魅族 16th 全面屏手机 6GB+64GB 静夜黑</h1>
							<p>
								<span class="price">￥2698</span> <numbox></numbox>
								<a href="#">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img src="https://img13.360buyimg.com/n1/s450x450_jfs/t19912/33/927199229/297549/8c269ff0/5b0fca0fN8d5600df.jpg">
						<div class="info">
							<h1>小米8 全面屏智能手机 6GB+64GB 黑色 全网通4G</h1>
							<p>
								<span class="price">￥2699</span> <numbox></numbox>
								<a href="#">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-card" v-for="(item,i) in goodslist " :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getGoodsSeleted[item.id]"
						@change="selectedChange(item.id, $store.getters.getGoodsSeleted[item.id])"
						></mt-switch>
                        <img :src="item.thumb_path">
						<div class="info">
							<h1>{{item.title}}</h1>
							<p>
								<span class="price">￥{{item.sell_price}}</span> 
								<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
								<a href="#" @click.prevent="remove(item.id, i)"></a>
								<a href="#">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
							<p>总计</p>
							<p>已勾选商品 <span class="red">2<!--{{$store.getters.getGoodsCountAnfAmount.count}}--></span> 件， 
							总价 <span class="red">￥5397<!--{{$store.getters.getGoodsCountAnfAmount.amount}}--></span></p>
						</div>
						<mt-button type="danger">去购买</mt-button>
					</div>
				</div>
			</div>
            

       </div>
    </div>
</template>

<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
export default{
	data() {
		return {
			goodslist: []
		}
	},
	created () {
		this.getGoodsList()
	},
	methods: {
		getGoodsList() {
			var idArr = []
			this.$store.state.car.forEach(item => idArr.push(item.id))
			if(idArr.length <= 0){
				return
			}
			this.$http.get('api/goods/getshopcarlist/'+ idArr.join(","))
			.then(result => {
				if(result.body.status === 0) {
					this.goodslist = result.body.message
				}
			})
		},
		remove(id, index) {
			this.goodslist.splice(index, 1)
			this.$store.commit('removeFromCar', (id,index))
		},
		selectedChanged(id, val) {
			this.$store.commit('updateGoodsSelected', {id, selected: val})
		}
	},
	components: {
		numbox
	}
}
</script>

<style <style lang="scss" scoped>
.shopcar-container{
    background-color: #eee;
	overflow: hidden;
	.goods-list{
		.mui-card-content-inner{
			display: flex;
			align-items: center;
		}
		img{
			width: 60px;
			height: 60px;
			display: block;
		}
		h1{
			font-size: 13px;
		}
		.info{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 218px;
			height: 71px;
			.price{
				color: red;
				font-weight: bold;
			}
		}
	}
	.jiesuan{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.red{
			color: red;
			font-weight: bold;
			font-size: 16px;
		}
	}
}
</style>